<template>
  <div class="bpmn_example">
    <div id="canvas"></div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import BpmnModeler from 'bpmn-js/lib/Modeler'
// 预览模式BpmnViewer 替换BpmnModeler
import BpmnViewer from 'bpmn-js/lib/Viewer'

import customTranslate from './customTranslate/customTranslate'

import { xmlStr } from './customTranslate/xmlStr'
var customTranslateModule = {
  translate: ['value', customTranslate],
}

onMounted(() => {
  var modeler = new BpmnViewer({
    container: '#canvas',
    additionalModules: [
      {
        ...customTranslateModule,
        paletteProvider: ['value', ''], // 禁用左侧工具
        labelEditingProvider: ['value', ''], // 禁用节点双击名称编辑
        contextPadProvider: ['value', ''], // 禁用节点编辑
        bendpoints: ['value', {}], // 禁用连线修改
        zoomScroll: ['value', ''], // 禁止缩放
        move: ['value', ''], // 禁止移动点个节点
        branding: ['value', ''], // 禁用品牌模块
      },
    ],
  })
  modeler
    .importXML(xmlStr)
    .then(function () {
      console.log('Success!')
    })
    .catch(function (err) {
      console.error('Error', err)
    })
})
</script>
<style lang="scss">
.bpmn_example {
  #canvas {
    width: 100%;
    height: 800px;
  }
}
/* 隐藏左侧工具栏 */
/* .bjs-palette {
  display: none !important;
} */
</style>
